<div *ngIf="currentTask" class="detail-container">

  <div class="todo">
    <i [ngClass]="{'check': !currentTask.isDone, 'checked': currentTask.isDone}" (click)="toggleToDone()">
    </i>
    <span class="todo-text" *ngIf="!isTitleClicked" (click)="clickTitle()">
      {{currentTask.todo}}
    </span>
    <input type="text" [(ngModel)]="taskTitle" [ngStyle]="{'display': isTitleClicked ? 'block': 'none'}"
      [appRenameTitle]="renameTitleEvent" (blur)="rename()">
  </div>

  <div class="detail">
    <div class="myday" (click)="toggleToday()">
      <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sun"></use>
      </svg>
      <span *ngIf="!currentTask.today" class="text">添加到“我的一天”</span>
      <span *ngIf="currentTask.today" class="text today">已添加到“我的一天”</span>
    </div>

    <div class="reminder group-top">
      <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-reminder"></use>
      </svg>
      <span class="text">提醒我</span>
    </div>

    <div class="deadline group-bottom">
      <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-deadline"></use>
      </svg>
      <span class="text">添加截止日期</span>
    </div>

    <div class="notes" [ngStyle]="{'border-color': isNotesFocus ? '#465efc' : 'white'}">
      <textarea rows="5" placeholder="备注"
                [(ngModel)]="notes" (click)="focusNotes($event)"></textarea>
      <div class="notes-footer" *ngIf="isNotesFocus">
        <div class="notes-left"></div>
        <div class="notes-btns">
          <button class="notes-cancel" (click)="undoSaveNotes()">取消</button>
          <button class="notes-ok" (click)="saveNotes($event)">确定</button>
        </div>
      </div>
    </div>
  </div>

  <div class="footer">
    <i class="anticon anticon-right" (click)="hideDetail()"></i>
    <span>{{creationTime}}</span>
    <i class="anticon anticon-delete"></i>
  </div>

</div>
